<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ page contentType="text/html;charset=utf-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:wb="http://open.weibo.com/wb">
<head>
<title>关键词搜索TOP排名</title>
<script>
		$(document).ready(function() {
			$("#initSearchIndex").addClass("active");
			 $('#reportChartTOP').highcharts({
		            chart: {
		                type: 'spline'//图表类型
		            },
		            title: {
		                text: '月平均搜索次数'//团表主标题
		            },
		            subtitle: {
		                text: '数据来源: search.saas.com'//图表子标题
		            },
		            xAxis: {
		            	//X轴坐标点
		                categories: ['1月', '2月', '3月', '4月', '5月', '6月',
		                    '7月', '8月', '9月', '10月', '11月', '12月']
		            },
		            yAxis: {
		                title: {
		                    text: '搜索次数'//Y轴坐标点 名称
		                },
		                labels: {
		                    formatter: function() {
		                        return this.value +'次'
		                    }
		                }
		            },
		            tooltip: {//提款
		                crosshairs: true,
		                shared: true
		            },
		            plotOptions: {
		                spline: {
		                    marker: {
		                        radius: 4,//Y数据点样式大小
		                        lineColor: '#666666',
		                        lineWidth: 1
		                    }
		                }
		            },
		            series: [{
		                name: '烧烤',
		                marker: {
		                	//线类型标记的样式
		                    symbol: 'square'
		                },
		                //Y轴数据
		                data: [70, 60, 90, 140, 180, 210, 250,360, 230, 180, 130, 90]
		    
		            }, {
		                name: '火锅',
		                marker: {//线类型标记的样式
		                    symbol: 'diamond'
		                },
		                data: [30, 40, 50, 80, 110, 150, 170, 160, 140, 100, 60, 40]
		            }]
		        });
		});
</script>
</head>

<body>
	<h1 align="center">关键词搜索TOP排名</h1>
	<c:if test="${not empty message}">
		<div id="message" class="alert alert-success"><button data-dismiss="alert" class="close">×</button>${message}</div>
	</c:if>

<form class="form-inline" action="/report/keywordReportTOP"  method="post">

				<c:set var="cityCode1" value="${cityCode}"></c:set>
			 	<label>城市：</label> 
			 		<select id="cityCode" name="cityCode" style="width: 100px">
						<c:forEach var="city" items="${citys}">
							<option value='<c:out value="${city.id}"/>'
								<c:if test="${city.id==cityCode1}">selected</c:if> 
							><c:out value="${city.name}"/></option>
						</c:forEach>
					</select>
	
<label>分类： 
				<c:set var="assortCode" value="${assort}"></c:set>
				<select id="assort" name="assort">   
					<option value="0" >无分类</option>
					<c:forEach var="assort" items="${assorts}">
						<option value='<c:out value="${assort.id}"/>'
							<c:if test="${assort.id==assortCode}">selected</c:if> 
						><c:out value="${assort.name}"/></option>
					</c:forEach>
				</select>
			</label>


<label>关键词：</label> <input id="word", name="word" class="input-large"  value="${word}"/>
		<label>
		  <button type="submit" class="btn btn-primary " id="search_btn">查询</button>
		</label>	  	
	<div class="row">
		<label style="padding-left: 20px;">
			查询的结果总数:<b>${page.totalResult}</b>
		</label>
	</div>	

</form>	
	<table class="table table-condensed table-hover table-bordered "" contenteditable="false">
		<thead>
		<tr>
			<!--<th>ID</th>-->
			<th width="18%">排名</th>
			<th width="18%">关键词</th>
			<th width="18%">搜索次数</th>
			<th width="18%">切分词</th>
		</tr>
		</thead>
		<tbody>
			<c:forEach var="report" items="${reportList}" begin="0" varStatus="i" step="1">
				<tr>
					<!--<td>${report.id}&nbsp;</td>-->
					<td>${i.count}&nbsp;</td>
					<td>${report.fieldName1}&nbsp;</td>
					<td>${report.count}&nbsp;</td>
					<td>${report.fieldName2}&nbsp;</td>
				</tr>
			</c:forEach>
		</tbody>		
	</table>
	<div class="pagination pagination-right pagination-large">
<ul contenteditable="false">
	<li><a href="#" onclick="javascript:gotoPage(${page.currentPage-1});">上一页</a></li>
	<li class="disabled"><a href="#">1</a></li>
	<li class="active"><a href="#">2</a></li>
	<li><a href="#">3</a></li>
	<li><a href="#">4</a></li>
	<li><a href="#">5</a></li>
	<li class="disabled"><a href="#" onclick="javascript:gotoPage(${page.currentPage+1});">下一页</a></li>
</ul>
</div>
	<div id="reportChartTOP" class="row"></div>
</body>
</html>